<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var teachers = ["武藤兰","苍井空","波多野结衣"];
				var ul = document.createElement("ul");
				for (var k in teachers) {
					var li = document.createElement("li");
					var txt = document.createTextNode(teachers[k]);
					li.appendChild(txt);
					ul.appendChild(li);
					li.addEventListener("mouseover", function() {
						this.style.backgroundColor = "gray";
					});
					li.addEventListener("mouseout",function(){
						this.style.backgroundColor = "";
					});
				}
				document.body.appendChild(ul);
			}
//				var li = document.getElementsByTagName("li");
//				li[0].addEventListener("mouseover",f1);
//				li[1].addEventListener("mouseover",f2);
//				li[2].addEventListener("mouseover",f3);
//				li[0].addEventListener("mouseout",f4);
//				li[1].addEventListener("mouseout",f5);
//				li[2].addEventListener("mouseout",f6);
//			}
//			 function f1() {
//            	 var li1 = document.getElementsByTagName("li")[0];
//            	 li1.style.backgroundColor = "gray";
//            }
//            function f2() {
//            	 var li2 = document.getElementsByTagName("li")[1];
//            	 li2.style.backgroundColor = "gray";
//            }
//            function f3() {
//            	 var li3 = document.getElementsByTagName("li")[2];
//            	 li3.style.backgroundColor = "gray";
//            }
//            function f4() {
//            	 var li4 = document.getElementsByTagName("li")[0];
//            	 li4.style.backgroundColor = "white";
//            }
//            function f5() {
//            	 var li5 = document.getElementsByTagName("li")[1];
//            	 li5.style.backgroundColor = "white";
//            }
//            function f6() {
//            	 var li6 = document.getElementsByTagName("li")[2];
//            	 li6.style.backgroundColor = "white";
//            }
		</script>
	</head>
	<body>
	</body>
</html>
